Vue3 からはじめる Web アクセシビリティ草案

https://gyazo.com/3a2a2919e156d721277ae29ebc7a9eae

Vue.js

自己紹介

https://www.youtube.com/watch?v=e8thOaizpiY

2019年、Roppongi.js #4で発表

Vue 3からはじめる？

Webアクセシビリティのガイドラインが追加された

https://v3.vuejs.org/guide/a11y-basics.html

日本語翻訳担当しました（basics）

https://github.com/vuejs-jp/ja.vuejs.org/blob/lang-ja/src/guide/a11y-basics.md

https://github.com/vuejs-jp/ja.vuejs.org/pull/61

そのほかレビュー担当しました

https://gyazo.com/45276f5f84f1acecdfe62a84cee54c0b

ボスからの深夜呼び出し

そもそもドキュメントは昔にはなかったのか？

あまり言及されてなかった

As we develop our <blog-post> component, some features may require communicating back up to the parent. For example, we may decide to include an accessibility feature to enlarge the text of blog posts, while leaving the rest of the page its default size:

https://vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events

You can use this base icon as is- the only thing you might need to update is the viewBox depending on the viewBox of your icons. In the base, we’re making the width, height, iconColor, and name of the icon props so that it can be dynamically updated with props. The name will be used for both the <title> content and its id for accessibility.

https://vuejs.org/v2/cookbook/editable-svg-icons.html#Base-Example

https://github.com/vuejs/vuejs.org/pull/1002

昔のプルリクエスト

Callum Macraeが書いた

https://github.com/vuejs/docs-next/pull/81

Maria M Lamardoがリーダーとなって出した

ドキュメント化をめぐる議論について

やっていき記事なだけでは？

関心はvueをもってしてどうアクセシビリティ対応をするのか、のはず

Natalia Tepluhina

https://github.com/vuejs/docs-next/pull/109#pullrequestreview-419136537

However, I have a major concern: this guide here is very general and not Vue-specific. The main part touching Vue is about vue-router and Vue Router doesn't belong to the core docs area as well. I am not sure how to deal with this, the best idea I have is to place a short description about why a11y is important and then provide a link to this detailed guide hosted on VueCommunity or as a standalone website (similarly to what we have for Vuex, Vue Router etc.)

しかし、私は大きな懸念があります：このガイドは非常に一般的で、Vueに特化したものではありません。Vueに触れている主な部分はvue-routerについてであり、Vue Routerも同様にコアドキュメントの領域に属していません。私はこれにどのように対処したらよいかわからないので、私が持っている最良のアイデアは、なぜa11yが重要なのかについての短い説明を置き、VueCommunityでホストされているこの詳細なガイドへのリンクを提供するか、またはスタンドアロンのウェブサイトとして提供することです（Vuex、Vue Routerなどのために持っているものに似ています）。

そのリソースが分散化してしまうのはどうなのか、という疑問もある

https://github.com/vuejs/docs-next/pull/109#issuecomment-635180709

専用のサイトも尊いが、それは分断たりえるのではないか。まずはメインの文書から創造していこう

https://github.com/vuejs/docs-next/pull/109#issuecomment-635290819

https://github.com/vuejs/docs-next/pull/109#issuecomment-635380463

I disagree with as well as very similar topics like Security and TypeScript - they are not similar. Security section focuses on security related to Vue very tightly - we don't explain what is XSS there, we just say 'what Vue does for you'. Same to TS: we don't explain what interface is, we focus on how TS is related to Vue.

On the contrary, proposed a11y doc focuses a lot on things not related to Vue. I hope this explanation will make my concern more clear.

私は、as well as as well as similar topics like Security and TypeScriptには同意できません。セキュリティのセクションでは、Vue に関連するセキュリティに非常に重点を置いています - 私たちはそこで何が XSS であるかを説明せず、ただ「Vue があなたのために何をしてくれるのか」と言うだけです。TSについても同様で、インターフェイスが何であるかは説明せず、TSがVueとどのように関係しているかに焦点を当てています。

それに対して、提案されている a11y のドキュメントでは、Vue とは関係のないことに重点が置かれています。この説明が私の懸念をより明確にしてくれることを期待しています。

https://github.com/vuejs/docs-next/pull/109#issuecomment-636579837

I have the similar concern here. I'm not sure we have some good enough code samples about like gathering Vue input/output components together as a form for the "Semantics" page. But honestly, in my opinion, the true reason is we didn't have too much Vue-specific experiences on this. As a start, I think non Vue-specific guidelines is still fine.

Btw, for the order, I probably prefer putting router-related section later, which means: content structure -> semantics -> routing -> other common missing pieces. WDYT?

Then I believe we could accumulate more experiences and improve this progressively. Maybe we could have a dedicated docsite for a11y when we surely have a larger picture about this.

And I also believe we have a strong community. So once we release this, we could call for more Vue-specific knowledge and experiences about a11y. And things would become easier I think.

私はここでも同様の懸念を持っています。Vue の入出力コンポーネントをまとめて "Semantics" ページのフォームとして使用するなど、十分なコードサンプルがあるとは思えません。しかし、正直なところ、Vueに特化した経験があまりなかったのが真の原因だと思います。手始めに、Vue固有のガイドラインではないものでも良いと思います。

順番としては、ルータ関連を後回しにして、コンテンツ構造→セマンティクス→ルーティング→その他の共通の欠落している部分を後回しにした方がいいかもしれません。WDYT ?

そうすれば、もっと経験を積んで、徐々に改善していくことができると思います。もしかしたら、a11yのための専用のdocsiteができるかもしれません。

また、私たちには強力なコミュニティがあると信じています。ですから、これをリリースしたら、a11yに関するVue固有の知識や経験をもっと募集することができます。そうすれば、物事はより簡単になると思います。

管理問題について

アクセシビリティに詳しい人が居ない…

ドキュメント管理においてリソースが埋もれる

ReactやAngularは企業のOSS

---

Vue v3 におけるアクセシビリティ関係機能

Teleport

portal-vueがかつてあった

モーダル管理とかがしやすくなった